Guide to Coding (Credit: Fubsy)
Update Log Any suggestions of what to add to the guide are heavily appreciated! Please send them here if you would like. Do you like the new format? Yes No No preference 'Accessing Source Mode:' 'Source Mode in Classic Editor' 1. Start by clicking on the arrow of the "Edit" button in the top left corner of an article. 2. Select "Classic Editor" from the options that will appear. 3.In the top right corner, you'll see "Source", click this and it will automatically switch to this mode. To switch back to Visual, simply click the "Visual" next to it. Sometimes, if your page is heavily coded, you may be taken directly to Source Mode. 'Source Mode in Visual Editor' 1. Click the "Edit" button in the top left corner of an article. 2. Select the button shown above located in the top right next to the "Save" and "Cancel" buttons. 3. Select "Source Mode" from the list of options that will appear. That's all there is to it! 'Editing Comments and Threads in Source Mode' Believe it or not, you can also edit comments as though you were to edit any page, although excessively coding every comment is not recommended and highly discouraged. To enter Source Mode simply click this button in the bottom left corner of the comment: That's all there is to it! To return to the Visual Editor simply click the button with an eye on it next to it! 'Important Things to Note About Coding' #All coding is done in source mode. # Coding is easy to mess up, considering all extra symbols/format of the code counts towards it functioning. #Considering that most coding is taken from a source, if you mess up, don't get frustrated! Just start over with the original code, and try again. # Although you shouldn't take somebody's exact coding without their permission, it's okay to take it and edit it or change something, such as the colors, to make it your own. That's not stealing coding, it's repurposing it. # Before contributing, you should read the Policy and Editing Guidelines if you haven't. 'Keeping Coding Simple' Ever been stuck in source mode because your coding is too complex? Although with some types of coding, this is inevitable, this can be very easily avoided if you just simplify your coding. 'Understanding Tag Elements' There is no need to code each line of text individually. By understanding tags, you can limit the amount of formatting you need to do on your pages. ''' All hail . No, really. This little tag is going to make your life so much easier, if you use it correctly. is meant to apply code to 'div'isions. This means, it will apply the code you add to it to everything below it until you close it off with a . Of course, this can get a little confusing if you use every time you want to code a single line of text, it should be saved for when you want to code a section of the page, as there is a different tag for that. , a tag of select talents but of great use. is used to code one line of text specifically. I like to remember it as something that '''spans over one line. It's great for formatting titles and such for your pages. It's kind of like the more personal version of , a tag that thinks about specific lines of code more than the overall picture. ''' Ah, the notorious . Many pages are absolutely riddled with . is your "friend" with a bad influence. Commonly, it will seemingly "appear on pages by itself", and that's because sometimes it does through automated functions, usually because people use and then don't close it with a (and then spreads across your page's code like the plague). It pretty much is a weirder version of that codes 'p'aragraphs and is less reliable and more likely to mess itself up. It's probably better to avoid and stick with and . '''Keeping Your Coding Functional Of course things like images aren't going to majorly contribute to the disruption and complexion of code, but commonly on AJCW there are many overly-complex coding elements without any particular function, and are kind of just there. Here are some questions to ask yourself when trying to make a simply coded page. #Are all aspects of the coding functional? #Is any aspect too bright, overwhelming, or distracting from the rest of the content? #Am I prioritizing code over page content? 'Types of Pages' Article = Any page created that doesn't qualify as one of the below. Create . User Page = Pages that have User:(Username) at the beginning. Do not count as articles. They are created in the same way as articles, but with the information stated previously, . Sub-Page = A page that links to another page, and is created to do so, almost like a page inside a page. For example, User:FunkySunky/Sandbox, is a sub-page of User:FunkySunky. The sub-page of the user page, is also considered a user page. Another example, would be a sub-page such as DarkClan/Religion, and since DarkClan is an article, DarkClan/Religion would be considered one as well. Sub-pages are often used by groups to describe information about them not on their main page, and this is how such should be formatted. Blog Posts = Blog posts are pages that will appear under your "blog" section aka User blog: . They can be made . Templates = See Templates Section. You can create a template by creating a page titled "Template:Template Name Here". Please do not create any templates that are not intended for personal use, but use by the wiki (ex: a "WIP template" or a "Swearing template") without permission from a staff member. Text Formatting 'Centering' Centered Text Text Here 'Font Size' 'Using ' Maximum size using this method is 7. Text Here Text Here 'Using ' Text Here Text Here 'Using ' (Makes the font a set larger size) Text Here Text Here 'Using ' (Makes the font a set smaller size) Text Here Text Here 'Font Families' 'Font Family Code' Text Here Text Here 'Font Family List' Some fonts are only visible from certain computers, any font that appears as Times New Roman, that isn't it of course, is not compatible with your computer. Not all fonts may be listed here as well. 'Font Color' 'Font Color Code' Text Here * Text Here 'List of Font Colors' 'HTML Colors' For even more colors use an HTML Color Code, which consists of a # and 6 numbers, for example, #FFFFFF (White). You can make HTML Color Codes here: http://htmlcolorcodes.com Or get HTML Color Codes from an existing image: http://html-color-codes.info/colors-from-image/ 'Basic Font Formatting' 'Bold' Bold Text Bold Text 'Italicized' Italicized Text Italicized Text 'Bold + Italicized' Italicized Bold Text Italicized Bold Text 'Superscript' The text shown is Superscript Superscript 'Subscript' The text shown is Subscript Subscript 'Striked' This is Striked Text striked text 'Underlined' This is Underlined Text Underlined Text 'Showing/Hiding Text' 'Preformatted Text' Any text that is preformatted will show up in a scrolling bar as raw text, including coding. Preformatted Text Preformatted Text 'Hidden Text' Using this means you will be unable to edit your page from visual mode in classic editor. 'Using ' can be used to show coding in visual mode. Any code by will appear as text. nowiki is useful for coding guides nowiki is useful for coding guides 'Opacity' Opacity refers to the transparency of something. The opacity code can also be used on backgrounds, borders, etc. It is expressed through a number between 0 and 1. Think: 50% of 1 = 0.5; therefore, 0.5 = 50% visible. This is completely visible. This is only half-visible. This is invisible. This is completely visible. This is only half-visible. This is invisible. 'Complex Text Formatting' 'Text Shadow' Text Here Text Here 'Highlighted Text' Text Here Text Here 'Images' Basic file format in Source Mode: 'Using Art and Copyrighted Photos' Art that is drawn by someone else can only be used with proper credit and permission. This doesn't just mean saying "credit to the artist", you must credit them and ASK them for permission for them to be used on your articles unless it is explicitly stated that it is free to use. You can easily filter these images on Google Images by clicking "Tools" and then "Permission Rights". Any image that is listed as "Free for noncommercial reuse" or "Free for reuse" are free game. There are also websites that do this for you, a personal favorite being photosforclass.com. For more information, see this chart: |thumb]] 'File Size' Captions Visible Caption Hidden Caption Place your mouse over the picture and wait to see the caption! 'File Alignment' Center ---- Right ---- Left 'Image Galleries' 'Default Gallery' Lil Bird Fam CUTIES.png|Caption Lil Makani.png|Caption Lil chubster.png|Caption Lil Bird Fam CUTIES.png|Caption Lil Makani.png|Caption Lil chubster.png|Caption If you don't want a gallery to be centered simply remove the position="center" from the code, or change it to right or left. 'Slideshow' Lil Bird Fam CUTIES.png|Caption Lil Makani.png|Caption Lil chubster.png|Caption Lil Bird Fam CUTIES.png|Caption Lil Makani.png|Caption Lil chubster.png|Caption If you don't want a gallery to be centered simply remove the position="center" from the code, or change it to right or left. 'Sliders' Type 1 Lil Bird Fam CUTIES.png|Caption|linktext=Description Lil Makani.png|Caption|linktext=Description Lil chubster.png|Caption|linktext=Description Lil Bird Fam CUTIES.png|Caption|linktext=Description Lil Makani.png|Caption|linktext=Description Lil chubster.png|Caption|linktext=Description Type 2 Lil Bird Fam CUTIES.png|Caption|linktext=Description Lil Makani.png|Caption|linktext=Description Lil chubster.png|Caption|linktext=Description Lil Bird Fam CUTIES.png|Caption|linktext=Description Lil Makani.png|Caption|linktext=Description Lil chubster.png|Caption|linktext=Description 'Customizing Galleries' Lil Bird Fam CUTIES.png|Caption Lil Makani.png|Caption Lil chubster.png|Caption |undefined|link=undefined |undefined|link=undefined Lil Bird Fam CUTIES.png|Caption Lil Makani.png|Caption Lil chubster.png|Caption 'Audio and Media Players' 'Soundcloud (Audio Player)' Although soundcloud is allowed anywhere on the wiki, autoplay, which causes the soundcloud to automatically start when a page is viewed, is banned across AJCW. 'Colored Soundcloud' The color MUST be an HTML Code. It will not work otherwise. 'Videos (Media Player)' Press this button: How it looks in Classic Editor, where it can be located to the right in the "Add features and media" section. How it looks in Visual Editor, where it can be located in the bar shown in the top left corner. It's self-explanatory from there, but by the end of it you will have a video like this: 'Links' Linking consists of Text Displayed which would then show up as Text Displayed. For example, Linked Text Here. 'Images that Link' To keep an image from redirecting to the file page/source, you can insert "link=" without an actual redirection itself Usually images look like this in source mode: . To link something to a picture, simply do this: . It should turn out like this: Try clicking on it, it will take you to User:Fubsy! 'Customizing Links' Links will display like this, as mentioned earlier: Text Displayed But what if you wanted to make the Text Displayed a different color, font, size, etc? That's quite simple: Text Displayed Text Displayed 'Positioning' Positioning is setting certain elements to act a specific way or stay in a specific place. The code commonly looks something like this: Bottom and left can be replaced with top and right respectively. The larger the number (coordinates) on left, the more to the right it is. The larger the number on bottom, the farther up it is. Overflow can be set to visible or invisible. When it is set to visible, nothing will be hidden. If it is assigned a width and a height, and the overflow is set to invisible, anything pixels that pass the set height/width pixel (px) limit will be hidden. 'Fixed' Anything that is fixed in a certain position will remain in the coordinates it is assigned no matter what, and will be visible even as you scroll through the page. See the bird to the left for an example. It is fixed to the bottom left. 'Absolute' Similar to fixed positioning, anything that is positioned to be absolute will remain in the coordinates it is assigned no matter what. However, if the positioning is absolute it will not be visible when scrolling, it won't follow essentially. text or whatever 'Relative' Relative positioning positions objects not starting from the top left of the page like Fixed or Absolute does, but from the line they are placed on in the coding. It's useful for small tweaks and adjustments. text or whatever text or whatever 'Design Elements' 'Backgrounds' Keep in mind backgrounds are not allowed on articles or article sub-pages. 'Gradient Backgrounds' Rounded Borderless Gradient Background TEXT Gradient Borderless Background TEXT 'Gradients' Linear Gradient (To Bottom) Linear Gradient (To Top) Linear Gradient (To Left) Linear Gradient (To Right) Radial Gradient 'Solid Backgrounds' Borderless Solid Background Borderless Rounded Solid Background TEXT Solid Background with Border TEXT Rounded Solid Background with Border 'Borders' Keep in mind the four border of 25px total limit on articles. Box shadows do not add to the limit if they are included in the border code. Rounded Border TEXT Border TEXT Box Shadow TEXT Rounded Box Shadow TEXT 'Border Styles' Solid Solid Double Double Dashed Dashed Dotted Dotted Groove Groove Inset Inset (Lighter color on the bottom.) Outset (Lighter color on the top.) Outset 'Tabbers' |-| Title Text Here = Text |-| Title Text Here = Text |-| Title Text Here = Text |-| Title Text Here = Text 'Collapsibles' 'Scrolling Text' Borders and backgrounds can be added into the code to make a scrolling box. 'Up/Down (Y-Axis)' This must have a height in the code to work. (Try Scrolling!) This text will scroll across the y-axis pretty nice huh This text will scroll 'Left/Right (X-Axis)' This must have a width in the code to work (Try Scrolling!) This text will definitely scroll across the x-axis! This text will scroll Tables 'Tables with Coded Cells' 'Invisible Table' 'Centered Default Table' 'Buttons' Linked Text Here Linked Text Here 'Display Titles' It is recommended yet not required that you do not use these on regular articles. This will appear at the top of the page on as the title on articles. On user pages, it is what the tab will say when viewed from a different one. 'Hiding the Table of Contents' Simply paste this: anywhere on the page. Then the TOC will not show up. 'Positioning the Table of Contents' Simply paste this: __TOC__ where you want the TOC to appear. 'Removing the Edit Symbol Next to Titles' Simply paste this: __NOEDITSECTION__ and will not appear. 'Polls' Is this helpful? Yes! No! Could be more specific. Was missing what I needed. If the guide was missing what you needed, please contact Fubsy about it, so it can be added. Is this helpful? Yes! No! Could be more specific. Was missing what I needed. 'Lines' ---- Above is a line. Below is the code for it. ---- 'Categories' 'Adding Categories' Adding Categories is easy! Simply use this code: Category:CATEGORY NAME OR Enter categories into the section shown in the side-bar of Classic Editing mode. 'Important Aspects Concerning Categories' #Categories are case-sensitive (Ex: Packs ≠ packs) #You should not be creating new categories without consent and permission from the staff. #Only articles should be categorized. User pages, blog posts, etc. should not be categorized. #You should always try to PROPERLY categorize your pages! Don't just throw categories onto it, try and follow the guidelines and categories listed below. #Only attempt to categorize others pages if you know the AJCW categories well. 'Categories and Their Uses' 'Group Page/Subpage Categories' Groups ' For any group pages that do NOT classify under Clans, Packs, or Tribes. 'Group Subpages ' For any subpage where the original is categorized "Groups". 'Clans ' For any group pages that are clans. 'Traditional Clans ' For any clans directly based off the books.(Such as ThunderClan, RiverClan, SkyClan, etc.) Used with the Clans category. 'Nontraditional Clans ' For any clans indirectly based off the books. (Such as made up names like FireClan or LavenderClan.) Used with the Clans category. 'Clan Subpages For any subpage where the original page is categorized "Clans". Packs ' For any group pages that are packs. 'Pack Subpages ' For any subpage where the original page is categorized "Packs". 'Tribes ' For any group pages that are tribes. 'Tribe Subpages ' For any subpage where the original page is categorized "Tribes". 'Multi-species ' Used on group pages for groups that allow multiple species. Used with one of the group categories. (Clans, Packs, Tribes, or Groups) 'Systems ' Used on System pages, this should be the only category unless the page is a sub-page. 'Light-Realmed Used on Light-Realmed group pages with a group category. Not used on sub-pages. Neutral-Realmed Used on Neutral-Realmed group pages with a group category. Not used on sub-pages. Dark-Realmed Used on Dark-Realmed group pages with a group category. Not used on sub-pages. 'OC Page Categories' Original Characters ' Used on any page about a character. 'Cats ' Used on any OC page where the character is a cat. Used with the "Original Characters" category. 'Wolves ' Used on any OC page where the character is a wolf. Used with the "Original Characters" category. 'Dogs ' Used on any OC page where the character is a dog. Used with the "Original Characters" category. 'Big Cats ' Used on any OC page where the character is a big cat. Used with the "Original Characters" category. 'Nontraditional Species ' Used on any OC page where the character is not a species listed above (Cat, Dog, Wolf, or Big Cat). Used with the "Original Characters" category. 'Other Categories Guides ' Used on any page that serves as a guide to roleplay or something else AJCW- related. 'Roleplay Elements ' Used on any page that describes an element of roleplay outside locations or characters. 'Religion and Beliefs ' Used on any page that describes a religion or belief of a group. 'Locations ' Used on any page that describes a location. 'Medicine ' Used on any page that describes subjects related to healing and medicine. 'Article Management Categories (Often added with templates, see the template section below for more info on those) Disambiguation ' Used on pages that serve as a Disambiguation, along side the Disambigation template. This is an example of a Disambigation page in its correct format. 'Article stubs ' Used on pages that lack content. Should only be applied through the template. (Add the stub template and it will automatically appear.) 'Candidates for Deletion ' Used on pages that should be deleted for a valid reason. Should only be applied through the template. (Add the deletion template and it will automatically appear.) 'Candidates for Speedy Deletion ' Used on pages that should be deleted quickly for a special valid reason stated on the template. Should only be applied through the template. (Add the speedy delete template and it will automatically appear.) Some categories are not listed, but are not intended for use on a regular basis, such as the "Policy" category, which is strictly for the AJCW Policy pages. If you are unsure if a category should exist or not, contact a content moderator or administrator. 'Templates 'Design Templates' 'User Talk Template' It may be easier to paste the talk bubble into source mode and then edit it through visual mode. Access it in visual by double-clicking it! 'Username Template' While it may seem like I've just written your username here, the template does change based off whose reading it. 'Quote Template' You should always add credit to a quote, if it's not yours. If you don't know the name of the creator of the quote, you can always put "Anonymous". 'Family Tree Template' See here for the format: Template:Familytree See here for more information on the symbols: https://en.wikipedia.org/wiki/Template:Family_tree 'Notice Templates' Click any for more details! 'Delete Template' 'Speedy Delete Template' 'Stub Template' 'Critique Template' 'Art Theft Template' 'Inactive User Template' 'Spam' 'Forums' 'Making ' 1. Start by going to the ! You probably know how to do this, but here's a reminder just in case. All you have to do is look to the top right corner in the navigation bar, it should be on the very right. You'll come to a page with a variety of boards. Tutorials Forum, Debate Forum, Roleplay Forum, Your OC's', Fun and Games, Questions and Answers, News and Announcements, and finally General Discussion. Wow! That's a lot of boards, but don't let it intimidate you, the next step is much easier than it may seem. 2. Choosing a board for your post. This may seem difficult, but it's really not. A brief description of the topics of the boards is actually provided just beneath it, so you can always check that for reference. Still confused? Here, we'll tell you what they're for: 'Tutorials Forum' If you have a guide, or something you want to say that may teach/help others accomplish something, this is a great board to post it! However, if you're confused or need help with something, you can also post your question here, or on the Questions and Answers board. 'Debate Forum' This is the best place to start a discussion about topics on the wiki such as coding, rules, art theft, etc. It's basically a place where you can really state your opinion and have others share theirs in return. It is also where the revamps are posted. 'Roleplay Forum' The most popular board on AJCW by far, this is where you can create a thread and roleplay. Pretty self-explanatory honestly. 'Your OC's' This board is all about you! Or.. your character that is. Want to tell others about your great new OC through the forums? Go ahead. This is also where users that create "Sign-Ups" for their roleplays, post them. 'Fun and Games' Ever wanted to just hang out with your friends without having to keep to the wiki topic? Do so here! You can literally do anything on this board, as long as it keeps with the policies, that is. This board is often used for unrelated discussions threads for groups. 'Question and Answers' The name says it all! Ask us anything about the wiki or a topic concerning it. 'News and Announcements' Do you have a big announcement? Go ahead and post it here! This board is often user by users and staff to post announcements. 'General Discussion' Does your thread still not belong in one of the boards above, or are you just unsure? If it's still related to the wiki, just go ahead and put it in the General Discussion board. 3. Once you click on one of the boards, you should see a box at the top that says "Start a discussion". Click it. Something like this should appear: When you set a topic as a page name, the forum then appears in a section on bottom of the page, like the one shown below: Other 'Message Wall Greetings' 'Creating a Message Wall Greeting' Simply copy this url into your search bar, and create the article when it says it doesn't exist. http://animal-jam-clans-1.wikia.com/wiki/Message_Wall_Greeting: Keep in mind that if your username has a space, for the link to work you must have a _ in the place of the gap. (Ex: This_Is_A_Username 'Viewing/Editing a Message Wall Greeting' You can view or edit your Message Wall Greeting (if it has been created already) by typing in Message Wall Greeting: in the search bar. Alternatively, you can 'Activating Hacks' First, go to page. Next, create the article, and copy either or both of these into the page: importScriptPage('User:Monchoman45/ChatHacks.js', 'c'); Allows you to: #Allow you to manually set your status to away anytime. #Clear the chat of all messages. #Set words that will ping you (beep), when one appears in a message. importScriptPage('User:Joeytje50/ChatPMs.js', 'c'); Allows you to: #Create a group pm with anyone else who has chat hacks. Save the page, and follow the instructions to bypass your browser's cache that will automatically appear. Make sure your personal javascript (JS) is on. You can enable it in your preferences. See here for more detailed instructions. Keep in mind chat hacks have a notorious reputation to lag and break pms (both regular pms and group), and cause them to glitch. Keep this in mind if you plan on using them. This is mostly the group pm code, but users experience issues with the regular one as well. ''' Tags' These are codes that will format your message in the . They can be closed off as well. (Ex: bText here/b more text.) big = larger font small = smaller font name" = color b = bold text i = italic text s = text w/ slash through it u = text with underline sub = subscript sup = superscript c="#DEDBC6" = "Invisible" Text name" = Font bg="color" = Highlighted text 'Linking Things In the ''' Although it may seem like linking something in chat would be difficult, it's actually not! Simply copy the link and paste it, and it should automatically work. When linking things in chat you must keep in mind: #The URL cannot contain any swearing before 7:30 CST without a language warning. #If the content of the URL contains swearing, before 7:30 CST you must give a warning. (Ex: Hey guys this is cool but it does have some swears in it!) #The URL cannot contain extreme NSFW content. #You should give a warning to any content that may upset or offend users. Didn't know this? You should probably read the Chat Policy if you intend to chat in the near future.